<template>
	<section>	
		<el-row>
			<el-col :span="12">
				<div id="myChart" :style="{width: '100%', height: '500px'}"></div>						
			</el-col>
			<el-col :span="12">
				<div id="myChartbing" :style="{width: '100%', height: '500px'}"></div>						
			</el-col>			
		</el-row>
		<el-table :data="Lists" highlight-current-row v-loading="loading" style="width: 100%;">

			<el-table-column prop="user.realName" label="学生姓名" width="200">
			</el-table-column>
			<el-table-column prop="user.phone" label="手机号" width="200">
			</el-table-column>			
			<el-table-column prop="personScore" label="个人作业成绩" width="200" sortable>
			</el-table-column>		
			<el-table-column prop="teamScore" label="小组作业成绩" width="200"sortable sortable>
			</el-table-column>			
			<el-table-column prop="completionScore" label="课程完成度"  width="200" sortable>
			</el-table-column>	
			<el-table-column prop="performenceScore" label="课堂表现" width="200" sortable>
				<template scope="scope">
					<el-input type="number" v-if="!scope.row.isPublished" v-model="scope.row.performenceScore" v-on:change="performenceScorechange(scope.row.performenceScore,scope.$index)" placeholder="请输入学生课堂表现分数"></el-input>		
					<p v-if="scope.row.isPublished">{{scope.row.performenceScore}}</p>
				</template>					
			</el-table-column>	
			<el-table-column prop="totalScore" label="课程总成绩" width="200" sortable>
			</el-table-column>				
			<el-table-column prop="birth" min-width="200" label="操作" fixed="right">
				<template scope="scope">
					<el-button size="small" type="warning" @click.native="lookDetail(scope.row)" >查看详情</el-button>
					<el-button size="small" type="danger" @click.native="joinCourse(scope.row.userId,scope.row.performenceScore,scope.row.totalScore)" v-if="!scope.row.isPublished">成绩发布</el-button>
				</template>					
			</el-table-column>
		</el-table>
		<!--工具-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="5" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
	</section>
</template>
<script>
	import { courseStudent,courseTeam,courseone,coursestudentmark} from '../../api/api';
	import echarts from 'echarts'
	export default {
		data() {
			return {
				addFormVisible: false,//打分界面是否显示
				loading: false,
				dateloading:false,
				Lists: [],
				UserId:[],
				total:"",
				Calendardate:"",
				pageSize:'10',
				page:'1',
				key:'',
				date:"",
				type:"0",
				isSelf:'1',
				teamList:[],
				teaminferScore:[],
				teamroadScore:[],
				quanzhonglist:[
	                {value:'', name:'个人成绩'},
	                {value:'', name:'小组成绩'},
	                {value:'', name:'课堂表现'},
	                {value:'', name:'课程进度'},
	              
	            ],
	            performanceWeight:0,
	            personWeight:0,
	            teamWeight:0,
	            completionWeight:0
			}
		},	
		methods: {	
			//页面跳转
		    skip(link,id,row){
		        this.$router.push(
		        	{
		        		path:link,
		        		query:{
		        			id:this.$route.query.id,
		        			userid:id,
		        		}
		        	}
		        )
		    },	
			handleCurrentChange(val) {
				this.page = val;
				this.getList();
			},	
			performenceScorechange(value,index){
				if(value>100){
					this.$message({
						message:'分数不能超过100分',
						type: 'error'
					});			
					value=100;
					this.Lists[index].performenceScore = 100;
				}
				var personScore=this.Lists[index].personScore;
				var teamScore=this.Lists[index].teamScore;
				var completionScore=this.Lists[index].completionScore;
				this.Lists[index].totalScore=Math.round(value * this.performanceWeight)+Math.round(personScore * this.personWeight)+Math.round(teamScore * this.teamWeight)+Math.round(completionScore * this.completionWeight);
				this.Lists[index].totalScore=this.Lists[index].totalScore
				return this.Lists;
			},
			//获取项目列表
			getList: function (type) {
				this.loading = true;
				var _this=this;
				var params={courseId:this.$route.query.id,pageNum:this.page}
				//NProgress.start();
				courseStudent(params).then((res) => {			
					$.each(res.list, function(e,value) {
						value.totalScore=Math.round(value.performenceScore * _this.performanceWeight)+Math.round(value.personScore * _this.personWeight)+Math.round(value.teamScore * _this.teamWeight)+Math.round(value.completionScore * _this.completionWeight);
					});
					this.Lists = res.list;
					this.total=res.total;
					this.loading = false;
					//NProgress.done();
				});					
			},
			getcourseInfo:function(){
				var params=this.$route.query.id;
				var _this=this;
				courseone(params).then((res)=>{			
					_this.quanzhonglist[0].value=res.personWeight;
					_this.quanzhonglist[1].value=res.teamWeight;
					_this.quanzhonglist[2].value=res.performanceWeight;
					_this.quanzhonglist[3].value=res.completionWeight;
					_this.bingine();
					_this.performanceWeight=res.performanceWeight/100;
					_this.personWeight=res.personWeight/100;
					_this.teamWeight=res.teamWeight/100;
					_this.completionWeight=res.completionWeight/100;
				})			
			},				
			getTeaminfo: function () {
				var _this=this;
				var params={courseId:this.$route.query.id,pageSize:10}
				courseTeam(params).then((res) => {
					$.each(res.list,function(e,value){
						_this.teamList.push(value.name);
						_this.teaminferScore.push(value.inferScore);
						_this.teamroadScore.push(value.roadScore);
					})
					_this.drawLine()
				});		
			},			
		    drawLine() {
		      var _this=this;
		      let myChart = echarts.init(document.getElementById('myChart'))
		      // 绘制图表
		      myChart.setOption({
		      	color: ['#006699', '#4cabce'],
		        title: { text: '小组成绩',x:'center'},
		        tooltip: {},
		        xAxis: {
		          data:_this.teamList
		        },
		        yAxis: {},
		        series: [{
		          name: '沙盘推演成绩',
		          type: 'bar',
		          data:_this.teaminferScore
		        },{
		          name: '项目路演成绩',
		          type: 'bar',
		          data:_this.teamroadScore
		        }]
		      });
			},
		    bingine() {
		      var _this=this;
		      let myChart = echarts.init(document.getElementById('myChartbing'))
		      // 绘制图表
		      myChart.setOption({
			    title : {
			        text: '课程成绩权重',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        data: ['个人成绩','小组成绩','课程进度','课堂表现']
			    },
			    series : [
			        {
			            name: '详细',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data:_this.quanzhonglist,
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
		      });
			},		
			lookDetail:function(content,id){
				localStorage.setItem('studentdetail',JSON.stringify(content));
				this.skip('studentchievement',content.userId)
			},
			joinCourse:function(userId,performenceScore,totalScore){
				var martk={courseId:this.$route.query.id,userId:userId,performenceScore:performenceScore,totalScore:totalScore};
				var courseStudent=[];
				courseStudent.push(martk)
				this.$confirm('确定发布分数吗?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',					
					type: 'warning'
				}).then(() => {
					this.loading = true;
					var params=new URLSearchParams();
					params.append('courseStudentJson',JSON.stringify(courseStudent));
					coursestudentmark(params).then((r) => {
						if(!r.error){
							this.$message({
								message: '申请成功',
								type: 'success'
							});
							this.loading = false;
							this.getList();		
							
						}else{
							this.$message({
								message:r.message,
								type: 'error'
							});		
							this.loading = false;
						}
					})	
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消共享'		
					});						
				});				
			
			},			
		},	
		mounted() {
			var _this= this;
			this.getcourseInfo();
			this.getTeaminfo();
			setTimeout(function(){
				_this.getList();	
			},100)
			
		}
	};

</script>
